import { defineComponent, reactive, ref } from "vue";
import LeaveWordListService from "./leaveWordList.service";
import TablePage from "@/components/TablePage/TablePage";
import { tablesInterface } from "@/common/interface/table.interface";
import Detail from "./Detail/Detail";

export default defineComponent({
  name: 'leaveWordList',
  setup() {
    const tablePageRef = ref(null as any);
    const leaveWordListService = new LeaveWordListService();
    const tables = reactive({
      list: [
        {
          title: "留言列表",
          rowKey: "id",
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              align: "center",
              width: "80px",
            },
            {
              title: "留言类型",
              dataIndex: "cateName",
              align: "center",
              width: "150px",
            },
            {
              title: "留言内容",
              dataIndex: "content",
              align: "center",
              width: "280px",
            },
            {
              title: "联系方式",
              dataIndex: "contact",
              align: "center",
              width: "150px",
            },
            {
              title: "提交用户",
              dataIndex: "userName",
              align: "center",
              width: "150px",
            },
          ],
          toolbar: {
            left: ["refresh"],
            right: ["filter"],
          },
          searchForm: {},
          service: leaveWordListService,
          operation: ({ record }) => [
            {
              type: "delete",
              clickHandler: "delete",
            },
          ],
          popups: [
            {
              ref: 'detailRef',
              dom: () => <Detail />
            }
          ],
          pagination: true,
          tableSourceFormat: {
            data: 'rows',
            pageSize: 'pageSize',
            current: 'pageNum',
          },
        }
      ],
    } as tablesInterface);
    const config = reactive({
      table: tables.list[0]
    })
    return () => (
      <TablePage ref={tablePageRef} config={config} />
    )
  }
})